<template>
	<div>
		<el-dialog :visible.sync="dialogFormVisible" width="1300px">
			<el-form :model="form" label-width="100px" class="demo-ruleForm">
				<el-form-item label="名称" :label-width="formLabelWidth" prop="name">
					<el-input v-model="settingname" style="width: 350px;" disabled></el-input>
				</el-form-item>

				<el-form-item label="图片" :label-width="formLabelWidth" prop="images">
					<el-upload action="" :http-request="uploadFile" list-type="picture-card"
						:on-preview="handlePictureCardPreview" :on-remove="handleRemove" multiple :file-list="imgList"
						:limit="10" class="avatar-uploader" :timeout="8000">
						<i class="el-icon-plus"></i>
					</el-upload>

					<draggable v-model="imgList" :options="{ handle: '.handle' }">
						<div v-for="(file, index) in imgList" :key="index" class="sortable-item">
							<i class="el-icon-menu handle"></i>
							<el-dialog :visible.sync="dialogVisible2" :modal="false">
								<img width="100%" :src="dialogImageUrl" alt="" class="sortable-img" />
							</el-dialog>
						</div>
					</draggable>

					<div class="lunboTag">
						建议尺寸：300*300，可拖拽改变图片顺序，默认首张图为主图，最多上传10张
					</div>
				</el-form-item>
			</el-form>

			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="quedingtianjia()">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		peizhis,
		peizhiupdate
	} from "@/api/docment_function";
	import {
		upload
	} from "@/api/editor.js";
	import draggable from "vuedraggable";
	export default {

		data() {
			return {
				isClear: false,
				dialogVisible: false,
				dialogFormVisible: false,
				formLabelWidth: "180px",
				form: {
					id: '',
					images: ''
				},
				qubie: 0,
				imgList: [],
				dialogFormVisible: false,
				dialogVisible2: false,
				dialogImageUrl: '',
				settingname:''
			};
		},
		watch: {
			imgList: {
				handler(newVal) {
					// console.log("监听", newVal);
					// 这里创建新的数组 用逗号进行隔开 主要是接口要求
					let imagesarr = [];
					const result = newVal.map((item) => `${item.url}`).join(",");
					this.form.images = result;
					console.log("猪嗨", this.form.images);
				},
				deep: true,
			}
		},
		methods: {
			edit(val) {
				this.dialogFormVisible = true;
				this.form = {
					id: '',
					images: ''
				};
				console.log("图片", val.images);
				this.imgList = [];
				this.settingname = val.name;
				// this.form = Object.assign(this.form, val);
				this.form.id = val.id;
				this.form.images  = val.images;
				if (val.images != '') {
					this.imgList.push({
						url: val.images
					});
				}
			},
			// 关闭
			handleClose() {
				this.dialogFormVisible = false;
				this.$emit("refresh");
			},

			async quedingtianjia() {

				let param = {
					id: this.form.id,
					images: this.form.images
				};
				console.log('cccccccccccc',param);
				let result = await peizhiupdate(param);
				if (result.code == 0) {
					this.$message({
						message: `修改方案成功`,
						type: "success",
					});
					this.handleClose();
				}

			},

			uploadFile(param) {
				var file = param.file;
				const formData = new FormData();
				formData.append("file", file);
				upload(formData, param).then((res) => {
					if (res.code == 0) {
						this.imgList.push({
							url: res.data
						});
					}
				});
				console.log(this.imgList);
			},
			handlePictureCardPreview(file) {
				this.dialogImageUrl = file.url;
				this.dialogVisible2 = true;
				console.log(file);
			},
			handleRemove(file, fileList) {
				// fileList是剩下的照片
				this.imgList = fileList;
			},
		},

		computed: {

		},
	};
</script>

<style scoped lang="scss">
	.specificationInput {
		width: 250px;
	}

	.avatar-uploader-icon[data-v-22a48a68] {
		border: 1px dashed #d9d9d9;
		width: 300px;
		height: 300px;
		display: flex;
		justify-content: center;
		flex-direction: column;
	}

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		width: 300px;
		height: 300px;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409eff;
	}

	.addguigeBtn {
		margin-left: 100px;
		margin-bottom: 22px;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 180px;
		height: 180px;
		line-height: 180px;
		text-align: center;
	}

	.avatar {
		width: 180px;
		height: 180px;
		display: block;
	}

	v-deep .el-upload--picture-card {
		width: 300px !important;
		height: 300px !important;
	}

	.specificationInput1 {
		width: 150px;
	}

	v-deep .el-input {
		width: 280px !important;
	}
</style>